<template>
  <div class="com-container" style="fontsize: 12px">
    <div
      class="com-chart com-charts"
      ref="echarts"
      style="z-index: 555; position: relative"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["produceData"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
    };
  },
  watch: {
    produceData: {
      handler(newVal) {
        if (newVal) {
          this.allData = newVal;
          setTimeout(() => {
            this.initChart();
            window.addEventListener("resize", this.screenAdapter);
            this.screenAdapter();
          }, 100);
        }
      },
      immediate: true,
    },
  },

  mounted() {
    // setTimeout(() => {
    //   this.initChart();
    //   window.addEventListener("resize", this.screenAdapter);
    //   // 在页面加载完成的时候, 主动进行屏幕的适配
    //   this.screenAdapter();
    // }, 100);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);
      var circleRadius = ["18%", "30%"];
      var centers = [
        ["20%", "28%"],
        ["36%", "28%"],
        ["62%", "28%"],
        ["20%", "75%"],
        ["36%", "59%"],
        ["62%", "59%"],
      ];
      var titles = [
        // {
        //   title: "生产总盘数",
        //   nums: "12344",
        //   heg: "合格盘数",
        //   hegNum: "10795",
        //   bjps: "报警盘数",
        //   bjpsNum: "1549",
        // },
        // {
        //   title: "生产总重量(t)",
        //   nums: "66206.7",
        //   heg: "合格重量",
        //   hegNum: "57,886.5",
        //   bjps: "报警重量",
        //   bjpsNum: "8320.2",
        // },

        {
          title: "生产总盘数",
          nums: this.allData.totalCount.toString(),
          heg: "合格盘数",
          hegNum: this.allData.qualifiedCount.toString(),
          bjps: "报警盘数",
          bjpsNum: this.allData.warningCount.toString(),
        },
        {
          title: "生产总重量(t)",
          nums: this.allData.totalWeight.toString(),
          heg: "合格重量",
          hegNum: this.allData.qualifiedWeight.toString(),
          bjps: "报警重量",
          bjpsNum: this.allData.warningWeight.toString(),
        },
      ];
      var titleTextObject = {
        color: "#fff",
        rich: {
          //富文本
          white: {
            color: "rgba(23, 26, 29, 0.40)",
            fontSize: 14,
            padding: [8, 0, 0, 4],
          },
          newyellow: {
            color: "#171A1D",
            fontSize: 14,
            padding: [8, 0, 0, 4],
          },
          newgreen: {
            color: "#171A1D",
            fontSize: 12,
            padding: [8, 0, 0, 4],
          },
        },
      };
      var labelTextObject = {
        normal: {
          // formatter: function (params, i) {
          formatter: function (params) {
            // console.log(i);
            return params.percent.toFixed(1) + "%";
          },
          position: "center",
          show: true,
          textStyle: {
            fontSize: 12,
            fontWeight: "bold",
            color: "#74B2FC",
          },
        },
      };
      var labelTextObject1 = {
        normal: {
          // formatter: function (params, i) {
          formatter: function (params) {
            // console.log(i);
            return params.percent.toFixed(1) + "%";
          },
          position: "center",
          show: true,
          textStyle: {
            fontSize: 12,
            fontWeight: "bold",
            color: "#F86A3E",
          },
        },
      };

      var option = {
        grid: {
          left: -1,
          right: -1,
          bottom: -1,
          top: 0,
        },
        // backgroundColor: "#015c8a",
        title: [
          {
            text:
              "{white|" +
              titles[0].title +
              "}" +
              "  " +
              "{newyellow|" +
              titles[0].nums +
              "\n}" +
              "{white|" +
              titles[0].heg +
              "}" +
              "  " +
              "{newyellow|" +
              titles[0].hegNum +
              "\n}" +
              "{white|" +
              titles[0].bjps +
              "}" +
              "  " +
              "{newyellow|" +
              titles[0].bjpsNum +
              "\n}",

            left: "35%",
            top: "18%",
            textAlign: "left",
            textStyle: titleTextObject,
          },
          {
            text:
              "{white|" +
              titles[1].title +
              "}" +
              "  " +
              "{newyellow|" +
              titles[1].nums +
              "\n}" +
              "{white|" +
              titles[1].heg +
              "}" +
              "  " +
              "{newyellow|" +
              titles[1].hegNum +
              "\n}" +
              "{white|" +
              titles[1].bjps +
              "}" +
              "  " +
              "{newyellow|" +
              titles[1].bjpsNum +
              "\n}",
            left: "35%",
            top: "65%",
            textAlign: "left",
            textStyle: titleTextObject,
          },
        ],
        series: [
          {
            name: titles[0].title,
            center: centers[0],
            radius: circleRadius,
            type: "pie",
            labelLine: {
              normal: {
                show: false,
              },
            },
            hoverAnimation: false,
            data: [
              {
                itemStyle: {
                  normal: {
                    color: "#74B2FC",
                  },
                },
                value: titles[0].hegNum,
                label: labelTextObject,
              },
              {
                value: titles[0].bjpsNum,
                itemStyle: {
                  normal: {
                    color: "rgba(116, 178, 252, 0.12)",
                  },
                },
              },
            ],
          },
          {
            name: titles[1].title,
            center: centers[3],
            radius: circleRadius,
            type: "pie",
            labelLine: {
              normal: {
                show: false,
              },
            },
            hoverAnimation: false,
            data: [
              {
                value: titles[0].bjpsNum,
                itemStyle: {
                  normal: {
                    color: "rgba(248, 106, 62, 0.12)",
                  },
                },
                label: labelTextObject1,
              },
              {
                value: titles[0].hegNum,
                itemStyle: {
                  normal: {
                    color: "#F86A3E",
                  },
                },
              },
            ],
          },
        ],
      };
      //   const payload = {
      //     id: "left-bottom-1",
      //     title:'闭合率（ % )',

      //     data: {
      //       data1: ["10", "19", "68", "210", "125"],
      //       x: ["砼拌和站", "水稳拌和站", "沥青拌和站", "沥青拌和站", "智能压浆"],
      //       total1: 197,
      //       total2: 197,
      //     },
      //   };

      //   const data1 = payload.data.data1;
      //   const x = payload.data.x;

      //   var option = {
      //     grid: {
      //       left: 15,
      //       right: 15,
      //       bottom: 2,
      //       top: 45,
      //       containLabel: true,
      //     },
      //     tooltip: {
      //       trigger: "axis",
      //       backgroundColor: "rgba(9, 30, 60, 0.6)",
      //       extraCssText: "box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;",
      //       borderWidth: 0,
      //       confine: false,
      //       appendToBody: true,
      //       textStyle: {
      //         color: "#fff",
      //         fontSize: 10,
      //       },
      //     },
      //     legend: {
      //       width: window.innerWidth < 1600 ? "100%" : "60%",
      //       icon: "rect",
      //       top: 7,
      //       itemWidth: 12,
      //       itemHeight: 12,
      //       textStyle: {
      //         color: "rgba(23, 26, 29, 1)",
      //         fontSize: 14,
      //       },
      //       align: "left",
      //     },
      //     xAxis: {
      //       data: x,
      //       axisTick: {
      //         show: false,
      //       },

      //       axisLine: {
      //         lineStyle: {
      //           color: "rgba(126, 134, 142, 0.5)",
      //           width: 0.8,
      //         },
      //       },
      //       axisLabel: {
      //         interval: 0,
      //         rotate: 0,
      //         color: "rgba(23, 26, 29, 1)",
      //         fontSize: 14,
      //       },
      //     },
      //     yAxis: [
      //       {
      //         axisTick: {
      //           show: false,
      //         },
      //         axisLine: {
      //           lineStyle: {
      //             color: "rgba(255, 129, 109, 0.1)",
      //             width: 1, //这里是为了突出显示加上的
      //           },
      //         },
      //         axisLabel: {
      //           color: "rgba(23, 26, 29, 1)",
      //           fontSize: 14,
      //         },
      //         splitArea: {
      //           areaStyle: {
      //             color: "rgba(255,255,255,.5)",
      //           },
      //         },

      //         splitLine: {
      //           show: true,
      //           lineStyle: {
      //             color: "rgba(126, 134, 142, 0.24)",
      //             type: "dotted",
      //           },
      //         },
      //       },

      //     ],
      //     series: [
      //       {
      //         name: payload.title,
      //         type: "pictorialBar",
      //         barGap: "-20%",
      //         symbol: "path://M18,3 L46,3 78,68 18,68 46,3 z",

      //         itemStyle: {
      //           color: {
      //             type: "linear",
      //             x: 0,
      //             y: 0,
      //             x2: 0,
      //             y2: 1,
      //             colorStops: [
      //               {
      //                 offset: 0,
      //                 color: "rgba(146, 217, 67, 1)",
      //               },
      //               {
      //                 offset: 1,
      //                 color: "rgba(146, 217, 67, 0.1)",
      //               },
      //             ],
      //             global: false, //  缺省为  false
      //           },
      //         },
      //         emphasis: {
      //           itemStyle: {
      //             opacity: 1,
      //           },
      //         },
      //         data: data1,
      //       },

      //     ],
      //   };

      this.chartInstance.setOption(option);
    },

    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;
      // console.log(titleFontSize);

      //   和分辨率大小相关的配置项
      const adapterOption = {
        legend: {
          textStyle: {
            fontSize: titleFontSize * 1.2,
          },
          itemWidth: titleFontSize * 1.2876,
          itemHeight: titleFontSize * 1.2876,
          itemGap: titleFontSize * 3,
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
        ],
        series: [
          {
            barWidth: titleFontSize * 7, //柱子宽
          },
          {
            barWidth: titleFontSize * 7, //柱子宽度
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope></style>
